<template>
  <div ref="chartsDom" style="width: 100%; height: 100%; margin: 0 auto"></div>
</template>
<script setup lang="ts">
/**
 * 模块引入
 */
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  watch,
  onBeforeUnmount,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import * as echarts from "echarts";
import { debounce } from "../../../utils";
import { centerMapOption } from "../chartOption";
import china from "../../../assets/json/china.json";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

/**
 * 数据
 */
let CenterMapcharts: any = null;
const props = defineProps({
  mapData: {
    type: Object,
    default: () => {
      return {
        pointsData: [],
        linesData: [],
      };
    },
  },
});
watch(
  () => props.mapData,
  () => {
    initCharts();
  },
  { deep: true }
);
onMounted(async () => {
  // await nextTick(); // 确保DOM已经渲染完成

  CenterMapcharts = echarts.init(proxy.$refs.chartsDom);
  initCharts();
});
const planePath = // 飞机svg
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
function initCharts() {
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap("china", china);
  const option = centerMapOption;
  option.series[0].data = props.mapData.pointsData;
  option.series[1].data = props.mapData.linesData;
  CenterMapcharts.setOption(option);
}
/**
 * 功能方法
 */
console.log("CenterMapView", debounce);
const $_resizeHandler = debounce(() => {
  console.log("resize");
  CenterMapcharts.resize();
}, 200);
// 为了让echarts随着屏幕大小变化
window.addEventListener("resize", $_resizeHandler);
onBeforeUnmount(() => {
  window.removeEventListener("resize", $_resizeHandler);
});
</script>
<style lang="scss" scoped>
.page-container {
}
</style>
